<template>
  <div class="main">
    <div class="bigTitle"></div>
    <div class="w">
      <div class="newsList">
        <div class="leftBox">
          <ul>
            <li v-for="item in news" :key="item.id">
              <div class="timeBox">
                <div class="imgBox"><img src="../assets/dou.png" alt="" /></div>
                <p>{{ getDate }}</p>
                <span>{{ getTime }}</span>
              </div>
              <router-link :to="{ path: 'newsDetaisl/' + item.id }">
                <div class="listBox">
                  <div class="title">{{ item.title }}</div>
                  <div class="type">{{ item.ArticleCat.name }}</div>
                  <div class="detaisl" v-html="item.content">
                    {{ item.content }}
                  </div>
                  <el-button>查看详情</el-button>
                </div>
              </router-link>
            </li>
          </ul>
          <Pagination ref="pagination" />
        </div>
        <div class="rightBox">
          <div class="lanmu">
            <div class="title">栏目列表</div>
            <ul>
              <li v-for="(item,index) in types" :key="index"><i class="el-icon-arrow-right"></i>{{ item.name }}</li>
            </ul>
          </div>
          <div class="hotList">
            <div class="title">推荐内容</div>
            <ul>
              <router-link
                :to="{ path: 'newsDetaisl/' + item.id }"
                v-for="item in hot"
                :key="item.id"
              >
                <li class="link">
                  <p>{{ item.title }}</p>
                  <span>{{ item.pubtime }}</span>
                </li>
              </router-link>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Pagination from "@/components/Pagination.vue";
import { ARTICLE, FILES, ARTICLECA } from "@/api/api";
import { _axios } from "@/api/_axios";
export default {
  name: "index",
  components: {
    Header,
    Footer,
    Pagination,
  },

  data() {
    return {
      news: [],
      hot: [],
      types:[],
      getTime: "",
    };
  },
  mounted() {
    this.getArticle();
    this.getArticleCa();
    this.getHot();
  },
  methods: {
    getArticle() {
      _axios(
        ARTICLE,
        {
          page: this.$refs.pagination.currentPage,
          limit: this.$refs.pagination.limit,
          type:'news'
        },
        "get"
      ).then((res) => {
        console.log(res,'文章')
        if (res.code == 0) {
          this.$refs.pagination.total = res.count;
          this.news = res.data;
          for (let i = 0; i < this.news.length; i++) {
            this.getTime = this.news[i].pubtime.substring(0, 10);
            this.getDate = this.news[i].pubtime.substring(8, 10);
          }
          console.log(res,'文章')
        }
      });
    },
    getArticleCa() {
      _axios(ARTICLECA, {
        type:'news'
      }, "get").then((res) => {
        console.log(res,'文章分类')
        if (res.code == 0) {
          this.types = res.data
        }
      });
    },
    getHot() {
      _axios(
        ARTICLE,
        {
          page: 1,
          limit: 5,
          recommend: 1,
          type:'news'
        },
        "get"
      ).then((res) => {
        console.log(res,'推荐')
        if (res.code == 0) {
          this.hot = res.data;
        }
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>


<style scoped>
.bigTitle {
  width: 100%;
  height: 260px;
  background-color: #eee;
  text-align: center;
  padding-top: 116px;
  box-sizing: border-box;
  background: url(../assets/news.png) no-repeat;
  background-size: 100% 100%;
}

.newsList {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.newsList .leftBox {
  width: 850px;
  background-color: #fff;
  padding: 0 45px 20px;
  box-sizing: border-box;
}
.newsList .leftBox li {
  display: flex;
  justify-content: space-between;
}
.newsList .leftBox li .timeBox {
  padding-top: 15px;
  box-sizing: border-box;
  width: 50px;
  margin-right: 30px;
}
.newsList .leftBox li .timeBox .imgBox {
  width: 50px;
  height: 50px;
}
.newsList .leftBox li .timeBox .imgBox img {
  width: 100%;
  height: 100%;
}
.newsList .leftBox li .timeBox p {
  font-size: 37px;
  color: #999999;
  margin: 10px 0;
}
.newsList .leftBox li .timeBox span {
  display: inline-block;
  border-top: 1px solid #d2d2d2;
  font-size: 12px;
  color: #999999;
}
.newsList .rightBox {
  width: 330px;
  background-color: #fff;
}
.listBox {
  width: 680px;
  padding-top: 15px;
  padding-bottom: 35px;
  box-sizing: border-box;
  border-bottom: 1px solid #dfdfdf;
}
.listBox:hover .title{
  color:#2154C1;
}
.listBox .title {
  font-size: 24px;
  color: #333333;
}
.listBox .type {
  width: 100px;
  font-size: 14px;
  color: #999999;
  border-bottom: 2px solid #999999;
  margin: 13px 0 13px;
  padding-bottom: 10px;
}
.listBox .detaisl {
  font-size: 14px;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 36px;
}
.listBox .detaisl img {
  width: 100px !important;
  height: 100px !important;
}
.rightBox {
  padding: 40px;
  box-sizing: border-box;
  height: auto;
}
.rightBox .title {
  font-weight: 600;
  font-size: 16px;
  color: #333333;
  padding-bottom: 20px;
  border-bottom: 1px solid #dfdfdf;
}
.rightBox .lanmu {
  margin-bottom: 50px;
}
.rightBox .lanmu li {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #dfdfdf;
  font-size: 14px;
  color: #333333;
}
.rightBox .lanmu li i {
  margin-right: 5px;
}
.rightBox .hotList li {
  padding: 15px 0;
  border-bottom: 1px solid #dfdfdf;
}
.rightBox .hotList li:hover p{
  color: #2154C1;
}
.rightBox .hotList li p {
  font-size: 14px;
  color: #333333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.rightBox .hotList li span {
  font-size: 12px;
  color: #999999;
}

</style>
